Hi, I'm trying to figure out how to have a few hover tabs on my pet's page that span to the left and the right respectively instead of dropping down, and I can't get it to work. The one I'm focused on immediately is for my pet's minion so that it can pop out on the left, and this is what I have down at the moment.

{ background-color: ; top: 50px; left: 616px; position: absolute; height: 100px; width: 0px; overflow: hidden; padding: 0px 10px; border-right: 15px solid ; border-top-left-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 0px 1px 0px ; z-index: 11; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;}

:hover { height: 150px; padding: 10px;}

It actually works pretty much the same, you just need to change :hover { height: 150px; to width instead^^

Hm. While that did lead to it transitioning to the right now, I'm thinking it looks a lot better going with up and down given the problems with text, thank you. Do you know of a way to have the tab rise up instead of dropping down? I've seen a pet in the past weekish that had a minion tab rise instead of lower and I think that might go with Kilroy's current setup okay if I can figure it out.

You'll need to position the box when it's on hover. So you either add a margin-top or a top to the code^^ (I usually use the margin version because that value is inrelation to the previous one so you just need to put -whatever your box has a height)

I personally don't really mind how the text looks when the box hovers out. If you really look at it all hover boxes have some kind of weird effects^^

Ah, I see. I'm still learning a lot about CSS lately and its honestly a bit overwhelming at times, so thank you again.